<ng-container>
    <div *ngIf="!active"  class="tool">
        <app-c-txt-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'txt'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-txt-tool>
        <app-c-img-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightSrc]="rightData.src"

            *ngIf="componentToolType == 'img'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-img-tool>
        <app-c-web-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'SG_web'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
            ></app-c-web-tool>
        <app-c-pdf-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'pdf'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-pdf-tool>
        <app-c-video-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'video'"
            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-video-tool>
        <app-c-audio-tool
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'audio'"
            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-audio-tool>
        <app-c-btn-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'button'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-btn-tool>
        <app-c-select-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'SG_select'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-select-tool>

        <app-c-tieba-tool

            [rightData]="rightData"
            [comeList]="comeList"
            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"

            *ngIf="componentToolType == 'SG_tieba'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-tieba-tool>
        <app-c-qq-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_QQ'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-qq-tool>

        <app-c-weibo-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_weibo'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-weibo-tool>
        <app-c-brain-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_brain'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-brain-tool>

        <app-c-braininfo-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_infoext'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-braininfo-tool>

        <app-c-sixhats-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_turns_speak'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-sixhats-tool>
        <app-c-braingroup-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_tnfbgroup'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-braingroup-tool>
        <app-c-subjective-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_subjective'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-subjective-tool>

        <app-c-bullet-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_bullet'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-bullet-tool>

        <app-c-causal-tool

            [rightData]="rightData"
            [comeList]="comeList"
            *ngIf="componentToolType == 'SG_causal'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-causal-tool
>
        <app-c-guess-tool
            [rightData]="rightData"
            [comeList]="comeList"
            *ngIf="componentToolType == 'SG_guess'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-guess-tool>
        <app-c-seek-tool
            [rightData]="rightData"
            [comeList]="comeList"
            *ngIf="componentToolType == 'SG_seek'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-seek-tool>
        <app-c-mindmap-tool

            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_mindmap'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-mindmap-tool>
        <app-c-vote-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'SG_vote'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-vote-tool>
        <app-c-judgement-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'SG_judgement'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-judgement-tool>
        <app-c-checkbox-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"

            *ngIf="componentToolType == 'SG_checkbox'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-checkbox-tool>
        <app-c-sgaudio-tool

            [rightStyleX]="rightStyleX"
            [rightStyleY]="rightStyleY"
            [rightStyleW]="rightStyleW"
            [rightStyleH]="rightStyleH"
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_audio'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-sgaudio-tool>
        <app-c-special-battle-tool
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_special_battle'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        ></app-c-special-battle-tool>
        <app-c-originality-case-tool
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_originality_case'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        >

        </app-c-originality-case-tool>
        <app-c-coffee-tool
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_coffee'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        >

        </app-c-coffee-tool>
        <app-c-six-hat-tool
            [rightData]="rightData"
            [comeList]="comeList"

            *ngIf="componentToolType == 'SG_sixHat'"

            (onChange)="onChange($event)"
            (onChangeTxt)="onChangeTxt($event)"
            (onDelete)="onDeleteComponent()"
        >

        </app-c-six-hat-tool>
    </div>
    <div *ngIf="active" nz-row class="tree">
        <div nz-col [nzMd]="24">
            <nz-tree [nzNodes]="nodes"
                     [nzShowLine]="true"
                     (nzActivate)="onActive($event)"
            ></nz-tree>
        </div>
    </div>
    <div class="bottom-tab">
        <a class="menu-toggle active">
            <i class="icon icon-返回-1"></i>
        </a>
        <a [class.active]="active" (click)="toggle()">
            <i class="icon icon-工具"></i>
            决策树
        </a>
        <a [class.active]="!active" (click)="toggle()">
            <i class="icon icon-布置场景"></i>
            元件属性
        </a>
    </div>
</ng-container>
